vendors = official

@keyframes loader-01 
  0% 
    transform: rotate(0deg);
  100% 
    transform: rotate(360deg);

@keyframes fadeIn 
  from 
    opacity: 0
  to 
    opacity: 1
@keyframes fadeOut 
  from 
    opacity: 1
  to 
    opacity: 0


//从底部弹出
@keyframes slideUp 
  from 
    transform: translate3d(0, 100%, 0)
  to 
    transform: translate3d(0, 0, 0)
//从顶部弹出
@keyframes slideDown 
  from 
    transform: translate3d(0, -100%, 0)
  to 
    transform: translate3d(0, 0, 0)
//从右边弹出
@keyframes slideRight
  from 
    transform: translate3d(100%, 0, 0);
  to 
    transform: translate3d(0, 0, 0)
//从左边弹出
@keyframes slideLeft
  from 
    transform: translate3d(-100%, 0, 0);
  to 
    transform: translate3d(0, 0, 0)

@keyframes scalePop
  from 
    // transform: translate(-47%, -60%);
    transform: scale(0.97);
  to 
    transform: scale(1)


btnClass($color)
  border 1px solid $color
  background-color $color
  border-radius 5px
  height 60px
  display flex
  justify-content: center
  align-items: center
  margin-bottom 15px
  transition: all .2s
  position relative
  
.btn
  btnClass(#1B9AF7)
  color #fff
  &:hover
    background-color #4cb0f9
    border-color #2798eb
    color #fff
  &:active
    transform: scale(.98,.98);
    background-color #2798eb
    border-color #2798eb
    color #0880d7
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);

.list-funs
  margin-top 30px
  width 100%
  display flex
  flex-wrap: wrap
  justify-content: space-around
  .fun
    display flex
    justify-content: center
    align-items: center
    box-sizing border-box
    padding 8px
    border 1px solid #999
    border-radius 10px
    margin 5px
    shadow(1px, 2px, 3px, 1px, #ddd)
    &.primary
      background-color #337ab7
      color #fff
    &.success
      background-color #dff0d8
    &.info
      background-color #afd9ee
    &.warning
      background-color #fcf8e3
    &.danger
      background-color #f2dede
    &:active
      border none
      transform scale(.99, .99)
      box-shadow 0 0 0 1px #ddd inset

shadow(x=2px, y=2px, ext=10px, strong=2px, color=#888)
  box-shadow x y ext strong color

itemTitle()
  position relative
  box-sizing border-box
  border 1px solid #eee
  border-radius 10px
  width 300px
  height 400px
  margin 0 auto
  margin-top 60px
  display flex
  justify-content: center
  align-items: center
  transition all .3s
  shadow()
  &:active
    transform scale(.96, .96)

.seeCode
  btnClass(#ccc)
  color #000
  width 100px
  height 50px